<!DOCTYPE html>
<html>
{% load static %}
	<head>
		<meta charset="UTF-8">
		<title>用户注册</title>
		<!--1、首先：引入jQuery的js文件-->
    <link href="{% static '/css/login.css' %}" rel="stylesheet">
    <script src="{% static '/js/jquery-3.4.1.min.js' %}"></script>
		<!--2、外链式：再引入自己写的js文件-->
	</head>
    <style>
        .error-message{
            width: 100px;
            height: 20px;
            font-size:10px ;
        }
    </style>
	<body style="background-image: url('/static/img/注册8.jpg')">
	<form action="/user/login/" class="content" style="background-color:transparent; margin-left: 15%" onsubmit="return login();">

			<div class="line">
				<img src="/static/img/登录头.jpg" style="height: 70px;width:70px;" alt="" />
			</div>
			<div class="line">
				<h1>登录</h1>
			</div>

			<div class="line">
				<div class="line_left" style="margin-left:200px;float: left">
					<label for="cname" >用户名称</label>
				</div>
				<div class="line_right" style="width: 400px;float: left">
					<input type="text" name="cname" id="cname" placeholder="输入用户名"  >
                    <p><span id="aSpan" class="error-message" style="color:red;"></span></p>
					<!--onblur事件：文本框失去焦点-->
				</div>
			</div>

			<div class="line" style="margin-left:-50px;float: left">
				<div class="line_left" style=" width: 400px;float: left">
					<label for="cpassword">密码</label>
				</div>
				<div class="line_right" style="width: 400px;float: left">
					<input type="password" name="cpassword" id="cpassword" placeholder="输入用户密码" style="margin-right: 8px;">
                    <p><span id="bSpan" class="error-message" style="color:red;"></span></p>
				</div>
			</div>


			<div class="line" style="float: left;margin-left:-50px;">
				<div class="line_left" style="width: 400px;float: left">
					<label for="ecode">验证码</label>
                    <p><span id="dSpan" class="error-message" style="color:red;"></span></p>
				</div>
                <input type="text" style="height:36px;width: 100px;margin-right: 395px; margin-top: 10px" id="ecode" onblur="checkCode(this.value)">
                    <img src="/user/loadCode.jpg" onclick="changeCode(this) " style="margin-top: -50px; margin-left: 300px;" ><p><span style="color:red;" id="cSpan"></span></p>

                    <input type="hidden" name="redirect" value="{{ redirect }}">
                    <input type="hidden" name="cartitems" value="{{ cartitems }}">
			</div>
        <div class="line" style="float: left;margin-left:-30px;"><a href="/user/register/">没有账号？前往注册</a></div>
        <div class="line" style="float: left;margin-left:50px;">
            <button style="background-color:#87CEEB; width: 180px;height: 50px">登录</button>
        </div>
	</form>

 	</body>
<script>


        function login() {
            var cname = $("#cname").val();
            var cpassword = $("#cpassword").val();
            var ecode = $("#ecode").val();

            // 清除所有错误消息
            $(".error-message").text("");

            if (cname.length < 1) {
                $("#aSpan").text("请填写用户名");
                return false;
            }

            if (cpassword.length < 1) {
                $("#bSpan").text("密码不能为空");
                return false;
            }

            if (ecode.length < 1) { // 验证码长度应大于0
                $("#cSpan").text("请填写验证码");
                return false;
            }

            var cflag = checkCode(ecode);

            if (!cflag) {
                $('#cSpan').text('验证失败，请重新输入验证码');
                return false;
            }

        }


        //切换验证码
        function changeCode(imgObj) {
            imgObj.src = '/user/loadCode.jpg?time-' + new Date().getTime();
        }

       function checkCode(txt) {
                var cflag = false;
                $.ajax({
                    url: '/user/checkcode/',
                    type: 'get',
                    data: {'code': txt},
                    async: false,
                    success: function (result) {
                        var flag = result.flag;
                        if (flag) {
                            cflag = true;
                            $('#cSpan').text('验证成功');

                        } else {
                            $('#cSpan').text('验证失败，请重新输入验证码');

                        }
                    }
                })
                return cflag;
            }


</script>

</html>